import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAdminPermissions } from '../../contexts/AdminPermissionContext';
import { useAdminAuth } from '../../contexts/AdminAuthContext';
import PermissionDenied from '../../pages/admin/PermissionDenied';

/**
 * 权限控制路由组件
 * 根据用户权限决定是否允许访问特定路由
 * 
 * @param {Object} props - 组件属性
 * @param {string|Array<string>} props.permissions - 需要的权限
 * @param {string|Array<string>} props.roles - 需要的角色
 * @param {React.ReactNode} props.fallback - 无权限时的回退内容，默认为重定向到登录页
 */
const PermissionRoute = ({ permissions = [], roles = [], fallback = null }) => {
  const { hasPermission, hasRole, loading } = useAdminPermissions();
  const { isAuthenticated } = useAdminAuth();
  
  // 加载中状态
  if (loading) {
    return <div className="permission-loading">权限验证中...</div>;
  }
  
  // 未登录状态，重定向到登录页
  if (!isAuthenticated) {
    return <Navigate to="/admin/login" replace />;
  }
  
  // 检查权限
  const hasRequiredPermission = Array.isArray(permissions)
    ? permissions.length === 0 || permissions.some(perm => hasPermission(perm))
    : hasPermission(permissions);
    
  // 检查角色
  const hasRequiredRole = Array.isArray(roles)
    ? roles.length === 0 || roles.some(role => hasRole(role))
    : hasRole(roles);
  
  // 如果没有指定权限或角色要求，或者用户满足要求，则渲染子路由
  const canAccess = (permissions.length === 0 && roles.length === 0) || 
                   hasRequiredPermission || 
                   hasRequiredRole;
  
  // 如果有自定义的fallback组件，则显示它，否则显示我们创建的权限被拒绝页面
  if (!canAccess) {
    return fallback || <PermissionDenied />;
  }
  
  return <Outlet />;
};

export default PermissionRoute;